<template>
  <div v-loading="loading">
    <table class="table table-bordered mt-3 mb-1">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">
            产业产品
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEdit">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td width="10%">产品名</td>
          <td colspan="2" width="18%">品类</td>
          <td colspan="2" width="13%">规模</td>
          <td width="10%">规模单位</td>
          <td width="11%">现有存量</td>
          <td colspan="2" width="18%">年产量(单位)</td>
          <td width="20%">备注</td>
        </tr>
        <tr v-if="!products.length">
          <td>-</td>
          <td colspan="2">-</td>
          <td colspan="2">-</td>
          <td>-</td>
          <td>-</td>
          <td colspan="2">-</td>
          <td>-</td>
        </tr>
        <tr v-for="(item, index) in products" :key="index">
          <td>
            {{ item.product_name || '-' }}
          </td>
          <td colspan="2">{{ item.category_name || '-' }}</td>
          <td colspan="2">{{ item.scale || '-' }}</td>
          <td>{{ item.uscale || '-' }}</td>
          <td>{{ item.store_num || '-' }}</td>
          <td colspan="2">{{ item.current_year_output }} ({{ item.output_unit }})</td>
          <td class="p-0">{{ item.remark }}</td>
        </tr>
      </tbody>
    </table>
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      append-to-body
      title="修改产业产品信息"
      width="1000px"
    >
      <table class="table table-bordered mt-3 mb-1">
        <tbody>
          <tr>
            <td width="12%">产品名</td>
            <td colspan="2" width="12%">品类</td>
            <td colspan="2" width="12%">规模</td>
            <td width="12%">规模单位</td>
            <td width="9%">现有存量</td>
            <td colspan="2" width="16%">年产量(单位)</td>
            <td width="18%">备注</td>
          </tr>
          <tr v-for="(p, index) of editData" :key="index">
            <td class="report-input-td">
              <el-input
                v-model="p.product_name"
                class="text-center"
                placeholder="输入产品名"
              ></el-input>
            </td>
            <td class="report-input-td" colspan="2">
              <select-product-category
                v-model="p.category_code"
                @select="name => setBaseType(name, p)"
                default-first-option
                filterable
                clearable
                class="w-100"
              ></select-product-category>
            </td>
            <td class="report-input-td" colspan="2">
              <el-input v-model="p.scale" placeholder="输入规模" type="number"></el-input>
            </td>
            <td class="report-input-td">
              <el-input v-model="p.uscale" placeholder="输入规模单位"></el-input>
            </td>
            <td class="report-input-td">
              <el-input
                v-model="p.store_num"
                v-input-number="{ min: 0, fixed: 2 }"
                placeholder="库存数量"
              ></el-input>
            </td>
            <td class="report-input-td" colspan="2">
              <div class="flex-1 d-flex">
                <el-input
                  v-model="p.current_year_output"
                  v-input-number="{ min: 0, fixed: 2 }"
                  placeholder="输入数量"
                  type="number"
                ></el-input>
                <el-input v-model="p.output_unit" placeholder="输入单位"></el-input>
              </div>
            </td>
            <td class="report-input-td" colspan="1">
              <div class="d-flex align-items-center">
                <div class="flex-1 px-1">
                  <el-input
                    v-model="p.remark"
                    class="text-center flex"
                    placeholder="备注"
                  ></el-input>
                </div>
                <el-button
                  class="td-inner-btn px-3 text-danger"
                  type="text"
                  @click="deleteData(p.id, index)"
                >
                  <i class="fa fa-trash"></i>
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <el-button-group class="mb-2 mt-1">
        <el-button size="small" @click="editRowAdd">
          <i class="fa fa-indent"></i>
          添加一行
        </el-button>
      </el-button-group>
      <div class="text-center">
        <el-button type="primary" @click="saveData" :loading="saveLoading" style="min-width: 100px">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getResultArray } from '@/gov/components/creditFile/index'
import SelectProductCategory from '@/gov/components/creditFile/components/SelectCategory'
export default {
  components: {
    SelectProductCategory,
  },
  props: {
    queryId: {
      type: String,
      default: '',
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      products: [],
      editData: [],
      loading: false,
      visible: false,
      saveLoading: false,
      tableName: 'datum_customer_industrial',
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
  },
  watch: {
    queryId: {
      handler: function () {
        if (!this.queryId) {
          return
        }
        this.getData()
      },
      immediate: true,
    },
  },
  mounted() {},
  created() {
    this.$store.dispatch('getEnumCategory')
  },
  methods: {
    getData() {
      this.loading = true
      const params = { 'customer_related_id.eq': this.queryId }
      this.$api
        .getData(this.$serviceName, this.tableName, params)
        .then(res => {
          this.products = getResultArray(res)
          this.editData = this.products.map(item => {
            return { ...item }
          })
          if (this.editData.length < 5) {
            this.addTemp(5 - this.editData.length)
          }
        })
        .catch(() => {
          this.$message.error('请求产业信息失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    setBaseType(name, p) {
      p.category_name = name
    },
    handlerEdit() {
      this.editData = []
      this.visible = true
      this.editData = this.products.map(item => {
        return { ...item }
      })
      if (this.editData.length < 5) {
        this.addTemp(5 - this.editData.length)
      }
    },
    addTemp(len) {
      for (let i = 0; i < len; i++) {
        this.editData.push({})
      }
    },
    editRowAdd() {
      this.addTemp(1)
    },
    deleteItem(index) {
      this.editData.splice(index, 1)
    },
    deleteData(id, index) {
      if (!id) {
        this.deleteItem(index)
        return
      }
      this.$utils
        .msgbox({
          message: '确定删除此产品?',
          beforeClose: () => this.$api.deleteData(this.$serviceName, this.tableName, id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
    saveData() {
      let data = []
      for (let item of this.editData) {
        if (item.id && !item.product_name) {
          return this.$message.warning('请输入产品名称')
        }
        if (item.product_name) {
          item.customer_related_id = this.queryId
          item.current_year_output = item.current_year_output ? item.current_year_output : null
          data.push(item)
        }
      }
      if (!data.length) {
        return
      }
      this.saveLoading = true
      this.$api
        .updateBatch(this.$serviceName, this.tableName, data)
        .then(() => {
          this.$message.success('保存成功')
          this.getData()
          this.visible = false
        })
        .catch(() => {
          this.$message.error('保存失败')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/gov/components/creditFile/style.scss';
</style>
